<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>呼呼呼</title>
		<script src="../js/axios.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<div align="center">
				<h2>插入操作</h2>
				<h4>汽车名字:<input type="text" v-model="savecar.name"></h4>
				<h4>汽车颜色:<input type="text" v-model="savecar.color"/></h4>
				<h4>汽车价格:<input type="number" v-model="savecar.price"></h4>
				<button @click="savecarr">新增</button>
				<hr />
			</div>
			<div align="center">
				<h2>修改操作</h2>
				<h4>汽车编号:<input type="number" disabled="disabled" v-model="updatecar.id"></h4>
				<h4>汽车姓名:<input type="text" v-model="updatecar.name"></h4>
				<h4>汽车颜色:<input type="text" v-model="updatecar.color"></h4>
				<h4>汽车价格:<input type="number" v-model="updatecar.price"></h4>
				<button @click="updatecarr">修改</button>
				<hr />
			</div>
			<table align="center" width="75%" border="5px">
				<tr align="center">
					<td>汽车编号</td>
					<td>汽车名称</td>
					<td>汽车颜色</td>
					<td>汽车价格</td>
					<td>操作</td>
				</tr>
				<tr align="center" v-for="car in cars">
					<td v-text="car.id"></td>
					<td v-text="car.name"></td>
					<td v-text="car.color"></td>
					<td v-text="car.price"></td>
					<td>
						<button @click="back(car)">修改</button>
						<button @click="deletecars(car)">删除</button>
					</td>
				</tr>
			</table>
		</div>
		<script>
		axios.defaults.baseURL = "http://localhost:8080/Car"
			new Vue({
				el : "#app",
				data:{
					cars:[],
					savecar:{
						name : '',
						color : '',
						price : ''
					},
					updatecar:{
						id : '',
						name : '',
						color : '',
						price : ''
					}
				},
				methods:{
					getAll(){
						axios.get("/getAll").then(
							promise =>{
								this.cars = promise.data
							}
						)
					},
					deletecars(car){
						let y = confirm("确定删除？")
						if(y == true){
							axios.delete("/deletecar?id="+car.id).then(
							promise =>{
								alert(promise.data)
								this.getAll()
							}
						)
						}
						
					},
					savecarr(){
						let y = confirm("确认新增?")
						if(y == true){
							axios.post("/savecar",this.savecar).then(
							Promise =>{
								alert(Promise.data)
								this.getAll()
								this.savecar = {}
							}
						)
						}
						
					},
					back(car){
						this.updatecar = JSON.parse(JSON.stringify(car))
					},
					updatecarr(){
						let y = confirm("确认更改?")
						if(y == true){
							axios.put("/updatecar",this.updatecar).then(
							promise =>{
								alert(promise.data)
								this.getAll()
								this.updatecar = {}
							}
						)
						}
						
					}
				},
				created() {
					this.getAll()
				}
			})
		</script>
	</body>
</html>
